<template>
  <div class="t-synchronize" title="点击手动同步" @click="handleClick" >
    <div class="t-synchronize__state-title">{{ stateTitle[state] }}</div>
    <div class="t-synchronize__state-dot" :class="`t-synchronize__state-dot--${state}`">●</div>
  </div>
</template>

<script>
  export default {
    name: 't-synchronize',
    data() {
      return {
        stateTitle: {
          todo: '同步等待',
          'force-todo': '同步等待',
          doing: '同步中..',
          success: '同步成功',
          failure: '同步失败',
        },
      };
    },
    props: {
      state: {
        default: 'todo',
        type: String,
        validator(val) {
          if (val === 'todo' || val === 'doing' || val === 'success' || val === 'failure' || val === 'force-todo') {
            return true;
          }
          return false;
        },
      },
    },
    methods: {
      handleClick() {
        this.$emit('force-synchronize');
      },
    },
  };
</script>